import { Pagination } from '#/antd'
import { AccountApi, fetchAccountList } from '@/api/userCenter/authority/account'
import {
  GetAccountsReq,
  CommonUserInfo,
} from '@/api/userCenter/authority/model/accountModel'
import { FormProps, FormItemOption } from '@/components/Form/types'
import { useStore } from '@/store'
import { formatPagination } from '@/utils/antdOpFormatHelper'
import { computed, reactive } from 'vue'
import { TableStateWrapper } from '../types'

const useSearchUser = () => {
  const store = useStore()
  /**
   * 查询表单相关状态
   */
  const queryFormState = reactive({
    key: '',
  })
  /**
   * 表单绑定属性
   */
  const queryFormBind: FormProps = {
    model: queryFormState,
  }
  /**
   * 表单生成配置
   */
  const queryFormList: FormItemOption[] = [
    {
      formProps: {
        label: '用户名',
        name: 'key',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '输入用户名称',
        },
      },
    },
  ]
  const tableStateWrapper = reactive<TableStateWrapper>({
    selectedRowKeys: [],
    tableSize: 'small',
    tableData: [],
    pageInfo: {
      pageSize: 15,
      current: 1,
      total: 0,
    },
    tableColumns: [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '用户名',
        dataIndex: 'username',
      },
      {
        title: '手机号',
        dataIndex: 'phone',
      },
      {
        title: '昵称',
        dataIndex: 'name',
      },
      {
        title: '邮箱',
        dataIndex: 'mail',
      },
      {
        title: '登录次数',
        dataIndex: 'loginCount',
      },
      {
        title: '最后登陆时间',
        dataIndex: 'loginTime',
      },
      {
        title: '是否禁用',
        dataIndex: 'enabled',
        customRender: ({ text }) => (
          <a-badge
            status={text ? 'processing' : 'default'}
            text={text ? '启用' : '停用'}
          />
        ),
      },
      {
        title: '操作',
        dataIndex: 'options',
        width: 50,
        slots: {
          customRender: 'options',
        },
      },
    ],
  })

  const getAccountList = async () => {
    const reqData: GetAccountsReq = {
      key: queryFormState.key,
      current: tableStateWrapper.pageInfo?.current || 1,
      size: tableStateWrapper.pageInfo?.pageSize || 15,
    }
    const { data } = await fetchAccountList(reqData)
    tableStateWrapper.tableData = data.records
    tableStateWrapper.pageInfo = formatPagination(data)
  }
  const getAccountsLoading = computed(() =>
    store.getters['global/isOpLoading'](AccountApi.GET_ACCOUNT_LIST)
  )

  const rowSelection = {
    onChange: (selectedRowKeys: string[], selectedRows: CommonUserInfo[]) => {
      console.log(
        'selectedRowKeys:',
        selectedRowKeys,
        'selectedRows: ',
        selectedRows
      )
      tableStateWrapper.selectedRowKeys = selectedRowKeys
    },
  }
  const handleTableChange = async (pag: Pagination) => {
    if (tableStateWrapper.pageInfo) {
      tableStateWrapper.pageInfo.current = pag.current
      tableStateWrapper.pageInfo.pageSize = pag.pageSize
    }
    await getAccountList()
  }

  return {
    queryFormBind,
    queryFormList,
    getAccountsLoading,
    getAccountList,
    tableStateWrapper,
    rowSelection,
    handleTableChange,
  }
}

export default useSearchUser
